<template>
    <div>
        <div class="sy-tit">订单全寿命周期实时利率分布</div>
        <div id="myChart" style="width:1000;height:300px; margin:0 auto;margin-bottom:-60px"></div>
    </div>
</template>

<script>
export default {
    mounted() {
        this.InitChart()
    },
    methods: {
        InitChart() {
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 指定图表的配置项和数据
            var option = {
                color: ['#caf982', '#8080ff', '#ed818e'],
                tooltip: {
                    trigger: 'xAxis', // 若需要使用默认的『显示』『隐藏』触发规则，则可以去掉trigger的配置
                    axisPointer: { type: 'cross', show: true },
                    formatter: '{a}{b}{c}', // 默认触发规则中散点展示的内容，{a}标题;{b}X坐标;{c}Y坐标
                },
                legend: {
                    data: ['单个供应商', '单笔订单', '实时平均价'],
                    orient: 'horizontal',
                    x: 'right',
                    y: 'center',
                },
                grid: {
                    x: 35,
                    y: 50,
                    x2: 35,
                    y2: 98,
                },
                // xAxis: [
                //     {
                //         type: 'category',
                //         data: ['招投标', '合同签订', '采购定单', '物资生产', '物资配送', '工程投运验收', '工程质保'],
                //         axisPointer: {
                //             type: 'shadow',
                //         },
                //         axisLabel: {
                //             show: true,
                //             textStyle: {
                //                 color: '#595C61',
                //             },
                //             rotate: 45,
                //         },
                //         axisLine: {
                //             show: true,
                //         },
                //     },
                // ],
                xAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value}%',
                        },
                        // splitLine: {
                        //     show: false
                        // }
                    },
                    {
                        type: 'category',
                        data: ['招投标', '合同签订', '采购定单', '物资生产', '物资配送', '工程投运验收', '工程质保'],
                    },
                    // {
                    //     type: 'category',
                    //     data: ['招投标', '合同签订', '采购定单', '物资生产', '物资配送', '工程投运验收', '工程质保'],
                    // },
                ],

                yAxis: [
                    {
                        type: 'value',
                        name: '数量',
                        max: 250,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#595C61',
                            },
                            rotate: 45,
                        },
                        axisLine: {
                            show: true,
                        },
                    },
                    {
                        type: 'value',
                        name: '占比',
                        min: 0,
                        max: 100,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#595C61',
                            },
                            rotate: 45,
                        },
                        axisLine: {
                            show: true,
                        },
                    },
                ],
                series: [
                    {
                        name: '单个供应商',
                        type: 'scatter',
                        data: [10, 12, 12.5, 12.5, 12.3, 12.2, 10, 11, 50, 30, 40, 60, 90, 220],
                        color: '#caf982',
                        symbolSize: 10,
                    },
                    {
                        name: '单笔订单',
                        type: 'scatter',
                        data: [160, 180, 170, 190],
                        color: '#8080ff',
                        symbolSize: 12,
                    },
                    {
                        name: '实时平均价',
                        type: 'line',
                        data: [20, 40, 30, 10, 50, 10, 20, 20, 10, 0.2, 0.5],
                        color: '#ed818e',
                    },
                ],
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            myChart.on('click', function (e) {
                console.log('444', e)
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.sy-tit {
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #666666;
    margin-top: 20px;
}
</style>